//////////// 分页插件/////////////
class Page{
    constructor(classname, options) {
        // 将参数定义成属性
        this.options = options
        this.fn = this.options.fn || function(){}
        // 定义当前页
        this.currentPage = 1
        // 定义放页码的盒子
        this.pagination = null
        // 根据传递进来的类名获取到放分页的容器
        this.container = document.querySelector('.'+classname);
        // 自己创建分页大盒子
        this.box = document.createElement('div')
        // 放在容器中
        this.container.appendChild(this.box)
        // 修饰样式
        this.setStyle(this.box, {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            cursor: 'pointer'
        })
        this.box.onselectstart = () => false
        // 自己定义默认参数
        this.default = {
            language: {
                first: '首页',
                prev: '上一页',
                pagination: '',
                next: '下一页',
                last: '尾页'
            },
            pageData: {
                total: 1000,
                pageSize: 12
            }
        }
        // 如果用户传递了参数，就用用户传递的参数替换掉自己的定义的默认参数
        this.setParams()
        // 定义总页数
        this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
        // 根据自己定义的参数去创建小div
        this.createPagination()
        // 创建页码
        this.createPage()
        // 绑定单击事件
        this.clickDong()
        // 设置禁用项
        this.setDisabled()
        // 添加文本框和按钮
        this.textBox()
        this.fn(this.currentPage)
    }
    textBox() {
        var input = document.createElement('input')
        this.box.appendChild(input)
        this.setStyle(input, {
            width: '50px',
            height: '27px',
            outline: 'none',
            border: '1px solid #cccc',
            margin: '5px',
            'padding-left': '6px'
        })
        var btn = document.createElement('button')
        this.box.appendChild(btn)
        btn.innerText = 'GO'
        this.setStyle(btn, {
            height: '31px',
            margin: '5px',
            border: '1px solid #ccc',
            'background-color': '#0f0',
            outline: 'none'
        })
    }
    setDisabled() {
        if(this.currentPage === 1) {
            // 改背景
            this.box.children[0].style.backgroundColor = '#eee'
            this.box.children[1].style.backgroundColor = '#eee'
            // 添加特殊标记
            this.box.children[0].setAttribute('disabled', true)
            this.box.children[1].setAttribute('disabled', true)
        } else {
            this.box.children[0].style.backgroundColor = 'transparent'
            this.box.children[1].style.backgroundColor = 'transparent'
            // 添加特殊标记
            this.box.children[0].removeAttribute('disabled')
            this.box.children[1].removeAttribute('disabled')
        }

        if(this.currentPage === this.totalPage) {
            // 改背景
            this.box.children[3].style.backgroundColor = '#eee'
            this.box.children[4].style.backgroundColor = '#eee'
            // 添加特殊标记
            this.box.children[3].setAttribute('disabled', true)
            this.box.children[4].setAttribute('disabled', true)
        } else {
            this.box.children[3].style.backgroundColor = 'transparent'
            this.box.children[4].style.backgroundColor = 'transparent'
            // 添加特殊标记
            this.box.children[3].removeAttribute('disabled')
            this.box.children[4].removeAttribute('disabled')
        }
    }
    clickDong() {
        // 绑定事件
        this.box.onclick = () => {
            var target = window.event.target
            // 判断目标元素
            if(target.className === 'first' && target.getAttribute('disabled') != 'true') {
                // 点击的是首页
                this.currentPage = 1
                // 根据新的当前页设置新的页码p
                this.createPage()
                this.setDisabled()
                this.fn(this.currentPage)
            } else if(target.className === 'prev' && target.getAttribute('disabled') != 'true') {
                this.currentPage--
                if(this.currentPage < 1) {
                    this.currentPage = 1
                }
                // 根据新的当前页设置新的页码p
                this.createPage()
                this.setDisabled()
                this.fn(this.currentPage)
            } else if(target.className === 'next' && target.getAttribute('disabled') != 'true') {
                this.currentPage++
                if(this.currentPage > this.totalPage) {
                    this.currentPage = this.totalPage
                }
                // 根据新的当前页设置新的页码p
                this.createPage()
                this.setDisabled()
                this.fn(this.currentPage)
            } else if(target.className === 'last' && target.getAttribute('disabled') != 'true') {
                // 点击的是尾页
                // 将当前页设置为总页数
                this.currentPage = this.totalPage
                // 根据新的当前页设置新的页码p
                this.createPage()
                this.setDisabled()
                this.fn(this.currentPage)
            } else if(target.nodeName === 'P' && this.currentPage != target.innerText - 0) {
                this.currentPage = target.innerText - 0
                this.createPage()
                this.setDisabled()
                this.fn(this.currentPage)
            } else if(target.nodeName === 'BUTTON' && this.currentPage != target.previousElementSibling.value-0) {
                if(target.previousElementSibling.value > this.totalPage) {
                    target.previousElementSibling.value = this.totalPage
                }
                if(target.previousElementSibling.value < 1) {
                    target.previousElementSibling.value = 1
                }
                this.currentPage = target.previousElementSibling.value-0
                this.createPage()
                this.setDisabled()
                this.fn(this.currentPage)
            }
        }
    }
    createPage() {
        // 将页码盒子清空
        this.pagination.innerHTML = ''
        // 当总页数大于5的时候才能分3种情况
        if(this.totalPage > 5) {
            // 判断当前页是几，根据当前页创建页码
            if(this.currentPage <= 3) {
                // 1~5   
                this.createP(1, 5)     
            }
            // 最后3页
            else if(this.currentPage >= this.totalPage-2) {
                // 最后5个页码
                this.createP(this.totalPage-4, this.totalPage)
            }
            // 当前页在中间
            else {
                // 当前页-2~当前页+2
                this.createP(this.currentPage - 2, this.currentPage + 2)
            }
        } else {
            // 1~总页数
            this.createP(1, this.totalPage)
        }
    }
    createP(start, end) {
        for(var a=start; a<=end; a++) {
            var p = document.createElement('p')
            p.innerText = a
            this.pagination.appendChild(p)
            this.setStyle(p, {
                padding: '5px',
                margin: '5px',
                border: '1px solid #ccc'
            })
            if(a === this.currentPage) {
                p.style.backgroundColor = '#0f0'
            }
        }
    }
    createPagination() {
        // 根据自己定义的参数去创建小div
        for(var key in this.default.language) {
            var div = document.createElement('div')
            // 给创建好的div添加类名
            div.className = key
            div.innerText = this.default.language[key]
            this.box.appendChild(div)
            // 除了放页码的盒子都修饰样式
            if(key != 'pagination') {
                this.setStyle(div, {
                    margin: '5px',
                    padding: '5px',
                    border: '1px solid #ccc'
                })
            } else {
                this.pagination = div
                this.setStyle(this.pagination, {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center'
                })
            }
        }
    }
    setParams() {
        // 遍历用户传递的参数
        for(var key in this.options.language) {
            this.default.language[key] = this.options.language[key]
        }
        for(var key in this.options.pageData) {
            this.default.pageData[key] = this.options.pageData[key]
        }
    }
    setStyle(ele, styleObj) {
        for(var key in styleObj) {
            ele.style[key] = styleObj[key]
        }
    }
}





